<template>
	<view>
		<view class="header">
			<navigator class="left" open-type="navigateBack">
				<image class="icon" mode="aspectFill" src="../../../static/ai/left.png"></image>
				{{ title }}
			</navigator>
			<view class="right">
				<view class="item" @click="showQrcode">
					<image class="icon" mode="aspectFill" src="../../../static/ai/scan.png"></image>
					扫码上传
				</view>
				<view class="separate"></view>
				<view class="item" @click="showResources">
					<image class="icon" mode="aspectFill" src="../../../static/ai/notes.png"></image>
					内容获取
				</view>
			</view>
		</view>

		<u-modal :show="resourcesModelVisible" :width="resourcesModelWidth" showCancelButton
			:showConfirmButton="!!currentResources" closeOnClickOverlay @cancel="closeResources"
			@confirm="confirmResources">
			<view class="resources">
				<u-subsection :list="resourcesTypeMap" keyName="name" :current="currentIndex"
					@change="switchResourcesType"></u-subsection>
				<template v-for="(resourcesType, i) in resourcesTypeMap">
					<view v-if="typeof resources[currentIndex] != 'undefined'" v-show="currentIndex === i" :key="i"
						class="content">
						<view class="search">
							<u--input v-if="currentIndex == 0" v-model="resources[currentIndex].search.keyword"
								placeholder="搜索上传内容" prefixIcon="search"
								prefixIconStyle="font-size: 22px;color: #909399"></u--input>
							<uni-datetime-picker class="date" type="daterange"
								v-model="resources[currentIndex].search.date" />
							<view class="btn-group">
								<u-button class="btn" type="primary" text="搜索"
									:loading="resources[currentIndex].loading" @click="searchResources"></u-button>
								<u-button class="btn" plain :disabled="!selectedResources.length" text="删除"
									@click="delResources"></u-button>
							</view>
						</view>
						<u-empty v-if="resources[currentIndex].completed && resources[currentIndex].list.length == 0"
							mode="data"></u-empty>
						<u-checkbox-group v-model="selectedResources">
							<u-list v-if="resources[currentIndex].list.length" height="640rpx"
								@scrolltolower="getResources">
								<u-list-item v-for="(item, index) in resources[currentIndex].list" :key="index">
									<view
										:class="{line: true, active: currentResources && currentResources.id == item.id}"
										@click="selectResources(item)">
										<u-checkbox :name="item.id"></u-checkbox>
										<view v-if="currentIndex === 0" class="u-line-1">{{ item.content }}</view>
										<view v-else class="img">
											<u-avatar v-for="(img, k) in item.content" :src="img" :key="k"
												shape="square"></u-avatar>
										</view>
										<view class="date">{{ item.created }}</view>
									</view>
								</u-list-item>
								<u-loadmore v-if="resources[currentIndex].loading" status="loading" />
								<u-loadmore
									v-if="resources[currentIndex].completed && resources[currentIndex].list.length != 0"
									line status="nomore" />
							</u-list>
						</u-checkbox-group>
					</view>
				</template>
			</view>
		</u-modal>

		<u-modal :show="qrcodeModelVisible" v-if="qrcodeModelVisible" width="520rpx" closeOnClickOverlay @confirm="qrcodeModelVisible = false">
			<view class="qrcode">
				<view>扫码二维码上传内容</view>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="resourcesAddUrl" :options="{ margin: 10, size: '480rpx' }"></uqrcode>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		H5_URL
	} from '@/config/app'
	import resourcesApi from '@/api/resources.js'
	export default {
		props: {
			title: String,
			disableImg: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				resourcesAddUrl: H5_URL + '/pages/resources/add',
				qrcodeModelVisible: false,
				resourcesModelVisible: false,
				resourcesModelWidth: 0,
				currentIndex: 0,
				resources: {},
				selectedResources: [],
				currentResources: null
			}
		},
		computed: {
			resourcesTypeMap() {
				return [{
					key: 'text',
					name: '文本'
				}, {
					key: 'image',
					name: '图片' + (this.disableImg ? '(此模型不可用)' : '')
				}]
			}
		},
		methods: {
			showResources() {
				const systemInfo = uni.getSystemInfoSync()
				this.resourcesModelWidth = parseInt(systemInfo.windowWidth * 0.8)
				this.resourcesModelVisible = true
				this.initResourcesData()
			},
			closeResources() {
				this.resourcesModelVisible = false
				this.currentResources = null
				this.selectedResources = []
				this.$set(this, 'resources', {})
			},
			showQrcode() {
				this.qrcodeModelVisible = true
			},
			switchResourcesType(index) {
				if (this.disableImg) {
					return
				}
				this.currentIndex = index
				this.initResourcesData()
			},
			initResourcesData() {
				if (typeof this.resources[this.currentIndex] == 'undefined') {
					this.$set(this.resources, this.currentIndex, {
						list: [],
						loading: false,
						completed: false,
						page: 0,
						search: {
							keyword: '',
							date: []
						}
					})
					this.getResources()
				}
			},
			searchResources() {
				const resourcesData = this.resources[this.currentIndex]
				resourcesData.page = 0
				resourcesData.completed = false
				resourcesData.list = []
				this.getResources()
			},
			getResources() {
				const resourcesData = this.resources[this.currentIndex]
				if (resourcesData.completed || resourcesData.loading) {
					return
				}
				resourcesData.loading = true
				resourcesData.page++
				resourcesApi.get({
					type: this.resourcesTypeMap[this.currentIndex].key,
					page: resourcesData.page,
					search: resourcesData.search
				}).then(res => {
					if (res.data.data.lastPage) {
						resourcesData.completed = true
					}
					for (let item of res.data.data.list) {
						resourcesData.list.push(item)
					}
					resourcesData.loading = false
				}).catch(e => {
					resourcesData.loading = false
				})
			},
			selectResources(item) {
				this.currentResources = item
			},
			delResources() {
				uni.showLoading()
				resourcesApi.del({
					type: this.resourcesTypeMap[this.currentIndex].key,
					ids: this.selectedResources
				}).then(res => {
					for (const id of this.selectedResources) {
						const resources = this.resources[this.currentIndex].list.find(item => {
							return item.id == id
						})
						if (resources) {
							this.resources[this.currentIndex].list.splice(this.resources[this.currentIndex].list
								.indexOf(resources), 1)
						}
					}
					this.selectedResources = []
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			confirmResources() {
				this.$emit('confirm', JSON.parse(JSON.stringify(this.currentResources)))
				this.resourcesModelVisible = false
				this.selectedResources = []
				this.currentResources = null
			}
		}
	}
</script>
<style lang="scss">
	.header {
		height: 80rpx;
		background-color: #3577F5;
		color: #FFFFFF;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			margin-left: 35rpx;
			align-items: center;

			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 26rpx;
			}
		}

		.right {
			display: flex;
			margin-right: 60rpx;
			align-items: center;
			column-gap: 32rpx;

			.separate {
				height: 30rpx;
				border-left: 1rpx solid rgba(255, 255, 255, 0.56);
			}

			.item {
				display: flex;
				align-items: center;

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
			}

		}
	}

	.resources {
		width: 100%;
		height: 730rpx;

		.content {
			margin-top: 12rpx;

			.search {
				display: flex;
				justify-content: space-between;
				column-gap: 24rpx;
				margin-bottom: 12rpx;

				.ipnut {
					height: 36rpx;
				}

				.date {
					width: 360px;
				}

				.btn-group {
					display: flex;
					justify-content: space-between;
					column-gap: 24rpx;
				}

				.btn {
					width: 120rpx;
					height: 50rpx;
				}
			}

			.line {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				overflow: hidden;
				color: #333333;
				padding: 4rpx 8rpx;

				&.active {
					border: 2rpx solid #3c9cff;
					border-radius: 12rpx;
					background-color: rgba(60, 156, 255, .5);
					color: #fff;
				}

				.date {
					text-align: right;
					width: 450rpx;
				}
			}

			.img {
				display: flex;
				column-gap: 8rpx;
			}
		}
	}

	.qrcode {
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 24rpx;
	}
</style>